<div th:fragment="html">
    <script>
        $(function () {
            var data4Vue = {
                uri: 'forecart',
                orderItems: []
            };
            //ViewModel
            var vue = new Vue({
                el: '#workingArea',
                data: data4Vue,
                mounted: function () { //mounted　表示这个 Vue 对象加载成功了
                    this.load();
                },
                methods: {
                    load: function () {
                        var url = this.uri;
                        axios.get(url).then(function (response) {
                            vue.orderItems = response.data;
                            vue.$nextTick(function () {
                                linkDefaultActions();
                                cartPageRegisterListeners();
                            })
                        });
                    }
                }
            });

        })


        var deleteOrderItem = false;
        var deleteOrderItemid = 0;

        function cartPageRegisterListeners() {
            $("a.deleteOrderItem").click(function () {
                deleteOrderItem = false;
                var oiid = $(this).attr("oiid")
                deleteOrderItemid = oiid;
                $("#deleteConfirmModal").modal('show');
            });
            $("button.deleteConfirmButton").click(function () {
                deleteOrderItem = true;
                $("#deleteConfirmModal").modal('hide');
            });

            $('#deleteConfirmModal').on('hidden.bs.modal', function (e) {
                if (deleteOrderItem) {

                    var url = "foredeleteOrderItem?oiid=" + deleteOrderItemid;
                    axios.get(url).then(function (response) {
                        if (0 == response.data.code) {
                            $("tr.cartProductItemTR[oiid=" + deleteOrderItemid + "]").hide();
                        } else {
                            location.href = "login";
                        }
                    });
                }
            })

            $("img.cartProductItemIfSelected").click(function () {
                var selectit = $(this).attr("selectit")
                if ("selectit" == selectit) {
                    $(this).attr("src", "img/site/cartNotSelected.png");
                    $(this).attr("selectit", "false")
                    $(this).parents("tr.cartProductItemTR").css("background-color", "#fff");
                } else {
                    $(this).attr("src", "img/site/cartSelected.png");
                    $(this).attr("selectit", "selectit")
                    $(this).parents("tr.cartProductItemTR").css("background-color", "#FFF8E1");
                }
                syncSelect();
                syncCreateOrderButton();
                calcCartSumPriceAndNumber();
            });
            $("img.selectAllItem").click(function () {
                var selectit = $(this).attr("selectit")
                if ("selectit" == selectit) {
                    $("img.selectAllItem").attr("src", "img/site/cartNotSelected.png");
                    $("img.selectAllItem").attr("selectit", "false")
                    $(".cartProductItemIfSelected").each(function () {
                        $(this).attr("src", "img/site/cartNotSelected.png");
                        $(this).attr("selectit", "false");
                        $(this).parents("tr.cartProductItemTR").css("background-color", "#fff");
                    });
                } else {
                    $("img.selectAllItem").attr("src", "img/site/cartSelected.png");
                    $("img.selectAllItem").attr("selectit", "selectit")
                    $(".cartProductItemIfSelected").each(function () {
                        $(this).attr("src", "img/site/cartSelected.png");
                        $(this).attr("selectit", "selectit");
                        $(this).parents("tr.cartProductItemTR").css("background-color", "#FFF8E1");
                    });
                }
                syncCreateOrderButton();
                calcCartSumPriceAndNumber();


            });

            $(".orderItemNumberSetting").keyup(function () {
                var pid = $(this).attr("pid");
                var stock = $("span.orderItemStock[pid=" + pid + "]").text();
                var price = $("span.orderItemPromotePrice[pid=" + pid + "]").text();

                var num = $(".orderItemNumberSetting[pid=" + pid + "]").val();
                num = parseInt(num);
                if (isNaN(num))
                    num = 1;
                if (num <= 0)
                    num = 1;
                if (num > stock)
                    num = stock;

                syncPrice(pid, num, price);
            });

            $(".numberPlus").click(function () {

                var pid = $(this).attr("pid");
                var stock = $("span.orderItemStock[pid=" + pid + "]").text();
                var price = $("span.orderItemPromotePrice[pid=" + pid + "]").text();
                var num = $(".orderItemNumberSetting[pid=" + pid + "]").val();

                num++;
                if (num > stock)
                    num = stock;
                syncPrice(pid, num, price);
            });
            $(".numberMinus").click(function () {
                var pid = $(this).attr("pid");
                var stock = $("span.orderItemStock[pid=" + pid + "]").text();
                var price = $("span.orderItemPromotePrice[pid=" + pid + "]").text();

                var num = $(".orderItemNumberSetting[pid=" + pid + "]").val();
                --num;
                if (num <= 0)
                    num = 1;
                syncPrice(pid, num, price);
            });

            $("button.createOrderButton").click(function () {
                var params = "";
                $(".cartProductItemIfSelected").each(function () {
                    if ("selectit" == $(this).attr("selectit")) {
                        var oiid = $(this).attr("oiid");
                        params += "&oiid=" + oiid;
                    }
                });
                params = params.substring(1);
                location.href = "buy?" + params;
            });
        }

        function syncCreateOrderButton() {
            var selectAny = false;
            $(".cartProductItemIfSelected").each(function () {
                if ("selectit" == $(this).attr("selectit")) {
                    selectAny = true;
                }
            });

            if (selectAny) {
                $("button.createOrderButton").css("background-color", "#C40000");
                $("button.createOrderButton").removeAttr("disabled");
            } else {
                $("button.createOrderButton").css("background-color", "#AAAAAA");
                $("button.createOrderButton").attr("disabled", "disabled");
            }

        }

        function syncSelect() {
            var selectAll = true;
            $(".cartProductItemIfSelected").each(function () {
                if ("false" == $(this).attr("selectit")) {
                    selectAll = false;
                }
            });

            if (selectAll)
                $("img.selectAllItem").attr("src", "img/site/cartSelected.png");
            else
                $("img.selectAllItem").attr("src", "img/site/cartNotSelected.png");


        }

        function calcCartSumPriceAndNumber() {
            var sum = 0;
            var totalNumber = 0;
            $("img.cartProductItemIfSelected[selectit='selectit']").each(function () {
                var oiid = $(this).attr("oiid");
                var price = $(".cartProductItemSmallSumPrice[oiid=" + oiid + "]").text();
                price = price.replace(/,/g, "");
                price = price.replace(/￥/g, "");
                sum += new Number(price);

                var num = $(".orderItemNumberSetting[oiid=" + oiid + "]").val();
                totalNumber += new Number(num);

            });

            $("span.cartSumPrice").html("￥" + formatMoney(sum));
            $("span.cartTitlePrice").html("￥" + formatMoney(sum));
            $("span.cartSumNumber").html(totalNumber);
        }

        function syncPrice(pid, num, price) {
            $(".orderItemNumberSetting[pid=" + pid + "]").val(num);
            var cartProductItemSmallSumPrice = formatMoney(num * price);
            $(".cartProductItemSmallSumPrice[pid=" + pid + "]").html("￥" + cartProductItemSmallSumPrice);
            calcCartSumPriceAndNumber();

            var url = "forechangeOrderItem?pid=" + pid + "&num=" + num;
            axios.get(url).then(function (response) {
                if (0 != response.data.code) {
                    location.href = "login";
                }
            });
        }
    </script>

    <title>购物车</title>
    <div class="cartDiv">
        <div class="cartTitle pull-right">
            <span>已选商品  (不含运费)</span>
            <span class="cartTitlePrice">￥0.00</span>
            <button class="createOrderButton" disabled="disabled">结 算</button>
        </div>


        <div class="cartProductList">
            <table class="cartProductTable">
                <thead>
                <tr>
                    <th class="selectAndImage">
                        <img selectit="false" class="selectAllItem" src="img/site/cartNotSelected.png">
                        全选

                    </th>
                    <th>商品信息</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th width="120px">金额</th>
                    <th class="operation">操作</th>
                </tr>
                </thead>
                <tbody>
                <tr :oiid="oi.id" class="cartProductItemTR" v-for="oi in orderItems">
                    <td>
                        <img selectit="false" :oiid="oi.id" class="cartProductItemIfSelected"
                             src="img/site/cartNotSelected.png">
                        <a style="display:none" href="#nowhere"><img src="img/site/cartSelected.png"></a>
                        <img class="cartProductImg"
                             :src="'img/productSingle_middle/'+oi.product.firstProductImage.id+'.jpg'">
                    </td>
                    <td>
                        <div class="cartProductLinkOutDiv">
                            <a :href="'product?pid='+oi.product.id" class="cartProductLink">{{oi.product.name}}</a>
                            <div class="cartProductLinkInnerDiv">
                                <img src="img/site/creditcard.png" title="支持信用卡支付">
                                <img src="img/site/7day.png" title="消费者保障服务,承诺7天退货">
                                <img src="img/site/promise.png" title="消费者保障服务,承诺如实描述">
                            </div>
                        </div>

                    </td>
                    <td>
                        <span class="cartProductItemOringalPrice">￥{{oi.product.originalPrice|formatMoneyFilter}}</span>
                        <span class="cartProductItemPromotionPrice">￥{{oi.product.promotePrice|formatMoneyFilter}}</span>

                    </td>
                    <td>

                        <div class="cartProductChangeNumberDiv">
                            <span class="hidden orderItemStock " :pid="oi.product.id">{{oi.product.stock}}</span>
                            <span class="hidden orderItemPromotePrice "
                                  :pid="oi.product.id">{{oi.product.promotePrice}}</span>
                            <a :pid="oi.product.id" class="numberMinus" href="#nowhere">-</a>
                            <input :pid="oi.product.id" :oiid="oi.id" class="orderItemNumberSetting" autocomplete="off"
                                   :value="oi.number">
                            <a :stock="oi.product.stock" :pid="oi.product.id" class="numberPlus" href="#nowhere">+</a>
                        </div>

                    </td>
                    <td>
								<span class="cartProductItemSmallSumPrice" :oiid="oi.id" :pid="oi.product.id">
									￥ {{oi.product.promotePrice*oi.number|formatMoneyFilter}} 
								</span>

                    </td>
                    <td>
                        <a class="deleteOrderItem" :oiid="oi.id" href="#nowhere">删除</a>
                    </td>
                </tr>
                </tbody>

            </table>
        </div>

        <div class="cartFoot">
            <img selectit="false" class="selectAllItem" src="img/site/cartNotSelected.png">
            <span>全选</span>
            <!-- 		<a href="#">删除</a> -->

            <div class="pull-right">
                <span>已选商品 <span class="cartSumNumber">0</span> 件</span>

                <span>合计 (不含运费): </span>
                <span class="cartSumPrice">￥0.00</span>
                <button class="createOrderButton" disabled="disabled">结 算</button>
            </div>

        </div>

    </div>
</div>
